<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
        <script src="./js/html5shiv.min.js"></script>
        <script src="./js/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            img{
                width: 100%;
            }
            .my-carousel{
                margin-top: 50px;
            }
            .my-carousel,.my-carousel .item{
                height: 500px;
                overflow: hidden;
            }
            @media only screen and (max-width: 768px){
                .my-carousel,.my-carousel .item{
                    height: 200px;
                }
            }
            .my-thumbnail img{
                width: auto;
            }
            .my-grid{
                margin-top: 50px;
            }
            .my-hr{
                margin: 50px auto;
                
            }
            .my-hr > hr{
                border: 1px solid pink;
            }
        </style>
    </head>
    <body>
        <!-- 导航条 -->
        <nav class="navbar navbar-default navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">现代浏览器博物馆</a>
                </div>
        
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">综述 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">简述</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点 <span class="caret"></span></a>
                            <ul class="dropdown-menu" id="my-nav">
                                <li><a href="#chrome">Chrome</a></li>
                                <li><a href="#firefox">Firefox</a></li>
                                <li><a href="#safari">Safari</a></li>
                                <li><a href="#opera">Opera</a></li>
                                <li><a href="#ie">IE</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:;" data-toggle="modal" data-target="#myModal">关于</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- 轮播图 -->
        <!-- 跟data有关的属性都是jquery要用的 -->
        <div id="carousel-example-generic" class="carousel slide my-carousel" data-ride="carousel ">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                <li data-target="#carousel-example-generic" data-slide-to="4"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./images/chrome-big.jpg">
                    <div class="carousel-caption">
                        <h2>chrome</h2>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/firefox-big.jpg">
                    <div class="carousel-caption">
                        <h2>firefox</h2>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/safari-big.jpg">
                    <div class="carousel-caption">
                        <h2>safari</h2>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/opera-big.jpg">
                    <div class="carousel-caption">
                        <h2>opera</h2>
                    </div>
                </div>
                <div class="item">
                    <img src="./images/ie-big.jpg">
                    <div class="carousel-caption">
                        <h2>ie</h2>
                    </div>
                </div>
            </div>

            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <!-- 三列布局 -->
        <div class="container my-grid">
            <div class="row">
                <div class="col-md-4  my-thumbnail text-center">
                    <img src="./images/chrome-logo-small.jpg">
                    <div class="caption">
                        <h3>Chrome</h3>
                        <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
                        <p><a href="#" class="btn btn-primary" role="button">点我下载</a></p>
                    </div>
                </div>
                <div class="col-md-4  my-thumbnail text-center">
                    <img src="./images/firefox-logo-small.jpg">
                    <div class="caption">
                        <h3>firefox</h3>
                        <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
                        <p><a href="#" class="btn btn-primary" role="button">点我下载</a></p>
                    </div>
                </div>
                <div class="col-md-4  my-thumbnail text-center">
                    <img src="./images/safari-logo-small.jpg">
                    <div class="caption">
                        <h3>safari</h3>
                        <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
                        <p><a href="#" class="btn btn-primary" role="button">点我下载</a></p>
                    </div>
                </div>
              </div>
        </div>

        <!-- 线 -->
        <div class="container my-hr">
            <hr/>
        </div>

        <!-- 标签页 -->
        <div class="container" id="my-tab">
            <ul class="nav nav-tabs" role="tablist" id="my-list">
              <li role="presentation" class="active"><a href="#chrome" aria-controls="chrome" role="tab" data-toggle="tab">chrome</a></li>
              <li role="presentation"><a href="#firefox" aria-controls="firefox" role="tab" data-toggle="tab">firefox</a></li>
              <li role="presentation"><a href="#safari" aria-controls="safari" role="tab" data-toggle="tab">safari</a></li>
              <li role="presentation"><a href="#opera" aria-controls="opera" role="tab" data-toggle="tab">opera</a></li>
              <li role="presentation"><a href="#ie" aria-controls="ie" role="tab" data-toggle="tab">ie</a></li>
            </ul>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="chrome">
                    <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-7">
                                    <h3>IE 你懂的</h3>
                                    Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
                                </div>
                                <div class="col-md-5">
                                    <img src="./images/chrome-logo.jpg"/>
                                </div>
                            </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="firefox">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-5">
                                <img src="./images/firefox-logo.jpg"/>
                            </div>
                            <div class="col-md-7">
                                <h3>IE 你懂的</h3>
                                Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="safari">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-7">
                                <h3>IE 你懂的</h3>
                                Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
                            </div>
                            <div class="col-md-5">
                                <img src="./images/safari-logo.jpg"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="opera">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-5">
                                <img src="./images/opera-logo.jpg"/>
                            </div>
                            <div class="col-md-7">
                                <h3>IE 你懂的</h3>
                                Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="ie">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-7">
                                <h3>IE 你懂的</h3>
                                Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
                            </div>
                            <div class="col-md-5">
                                <img src="./images/ie-logo.jpg"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 版权 -->
        <div class="container">
            &copy;杨宁
        </div>

        <!-- 模态框 -->
        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">模态框</h4>
                    </div>
                    <div class="modal-body">
                        <p>模态框&hellip;</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <script src="./js/jquery-3.5.1.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
    </body>

    <script type="text/javascript">
        $(function(){
            $('.carousel').carousel({
                interval: 2000,
                // pause:null,
                // wrap:false
            });

            $("#my-nav > li > a").click(function(e){
                var href=$(this).attr("href");
                // console.log(href);
                $("#my-list > li > a[href='"+(href)+"']").tab('show');
                $(document).scrollTop($("#my-tab").offset().top);
                e.preventDefault();
            });
        })
    </script>
</html>